import React,{useState,useEffect} from 'react'
import Myevents from "../utils/events"
function Content({arr}) {
  // 函数组件没有生命周期，但是可以模拟啊，通过useEffect来进行模拟
  let [num,setNum] = useState(0)
  let [activeIndex,setActiveTindex] = useState(0) 
  useEffect(()=>{   // useEffect 为一个空数组的时候模拟componentDidmounted
      console.log(2);
      Myevents.addListener("send",fn)
  },[])
  useEffect(()=>{
    console.log("我执行了");
    return ()=>{ // useEffect返回的函数可以模拟组件将要卸载的生命周期
      console.log("组件将要卸载");
    }

  },[num]) // 当useEffect有依赖项的时候，相当于compoentDidUpdate ,理解为vue的watch
  let fn = (data)=>{
        setActiveTindex(data)
  }
  return (
    <div>
        {/* 回调函数的参数代表着num上一次的值 */}
        <button onClick={()=>setNum((num)=>num+1)}>点击我num++</button>
        <h1>{num}</h1>
        {arr[activeIndex].address}
    </div>
  )
}

export default Content